<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>AdminLTE 3 | Vue3 | 组件化Layout,Fullscreen,PushMenu</title>

  <!-- Google Font: Source Sans Pro -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
  <!-- Font Awesome Icons -->
  <link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="css/adminlte.min.css">
</head>
<body>
    <div id="app">
      <lte-layout logo="img/AdminLTELogo.png" preloader-visible>
        <!-- 顶部页头 -->
        <nav class="main-header navbar navbar-expand navbar-white navbar-light" style="min-height:3.5rem;">
          <ul class="navbar-nav">
            <li class="nav-item">
              <lte-push-menu></lte-push-menu>
            </li>
          </ul>
          <ul class="navbar-nav ml-auto">
            <li class="nav-item">
              <lte-fullscreen></lte-fullscreen>
            </li>
          </ul>
        </nav>

        <!-- 左侧菜单 -->
        <aside class="main-sidebar sidebar-dark-primary elevation-4">
          <p style="color:white;">SideBar</p>
        </aside>

        <!-- 工作区 -->
        <div class="content-wrapper">
          <lte-push-menu></lte-push-menu>
          <svg class="circular" viewBox="-10, -10, 50, 50">
            <path class="path" d="
                M 30 15
                L 28 17
                M 25.61 25.61
                A 15 15, 0, 0, 1, 15 30
                A 15 15, 0, 1, 1, 27.99 7.5
                L 15 15
                " style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"></path>
          </svg>
          <lte-fullscreen></lte-fullscreen>
        </div>

        <!-- 底部页脚 -->
        <footer class="main-footer" style="min-height:3.5rem;">
          Footer
        </footer>
      </lte-layout>
    </div>
</body>
<script src="js/vue.global.3.2.26.js"></script>
<!-- Event Bus -->
<script src="js/mitt.umd.js"></script>
<!-- 组件 -->
<script src="js/Layout.js"></script>
<script src="js/PushMenu.js"></script>
<script src="js/Fullscreen.js"></script>

<script type="text/javascript">
  const app = Vue.createApp({});
  //console.log(Vue.components)
  Vue.components.forEach(element => {
    app.component(element.name, element);
  });
  app.mount('#app');
</script>

<style>
  .content-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .circular {
    display: inline;
    height: 50px;
    width: 50px;
    animation: loading-rotate 2s linear infinite;
  }
  .path {
    animation: loading-dash 1.5s ease-in-out infinite;
    stroke-dasharray: 90,150;
    stroke-dashoffset: 0;
    stroke-width: 2;
    stroke: blue;
    stroke-linecap: round;
  }
  @keyframes loading-dash{
    0%{stroke-dasharray:1,200;stroke-dashoffset:0}
    50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}
    to{stroke-dasharray:90,150;stroke-dashoffset:-120px}
  }
</style>
</html>